<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <img src="@/assets/background/mango_avatar.jpg" class="avatar_box" />
      <!-- 登录表单 -->
      <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForm">
        <!-- 用户名 -->
        <el-form-item prop="phone">
          <el-input v-model="loginForm.phone" placeholder="请输入手机号" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock" type="password"></el-input>
        </el-form-item>
        <!-- 自动登录，记住密码，找回密码 -->
        <el-form-item class="opt">
          <el-checkbox-group v-model="loginForm.type" class="checkgroup_type">
            <el-checkbox @change="handleCheckAllChange" label="自动登录" name="type"></el-checkbox>
            <el-checkbox label="记住密码" name="type"></el-checkbox>
            <el-link type="info" @click="goPassword" class="checkgroup_refind" :underline="false">找回密码</el-link>
          </el-checkbox-group>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitLogin" class="btn" :disabled="loginAlready">{{login}}</el-button>
        </el-form-item>
      </el-form>
      <el-link type="info" @click="goRegist" class="regist_link" :underline="false">注册账号</el-link>
    </div>
  </div>
</template>

<script>
const Options = ['自动登录', '记住密码']

export default {
  data() {
    return {
      isClick: false,
      login: '登录',
      loginForm: {
        phone: '13120867934',
        password: '123456',
        type: []
      },
      rules: {
        phone: [
          { pattern: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(17[013678])|(18[0,5-9]))\d{8}$/, message: '请输入正确手机号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    loginAlready() {
      return this.isClick
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.loginForm.type = val ? Options : []
    },
    goPassword() {
      this.$router.push('/password')
    },
    goRegist() {
      this.$router.push('/register')
    },
    submitLogin() {
      this.isClick = true
      this.login = '正在登录，请稍候'
      setTimeout(() => {
        this.$refs.loginForm.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.post('/user/login', this.loginForm)
          if (res.code === 200) {
            sessionStorage.setItem('user', JSON.stringify(res.data))
            if (this.$route.path !== '/home') {
              this.$router.push('/home')
              this.$message({
                message: res.msg,
                type: 'success',
                center: true,
                offset: 120,
                duration: 500
              })
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error',
              center: true,
              offset: 250,
              duration: 1000
            })
          }
        })
        this.isClick = false
        this.login = '登录'
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #f4f5f7;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 350px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 80px;
  box-sizing: border-box;
}

.btn {
  width: 80%;
  transform: translate(30px, -10px);
}

.regist_link {
  position: absolute;
  bottom: 5%;
  left: 5%;
}

.checkgroup_type {
  height: 30px;
}

.checkgroup_refind {
  position: absolute;
  transform: translate(30px);
}

.opt {
  transform: translateY(-10px);
}

.el-checkbox {
  color: #909399;
}
</style>
